<template>
    <div>
        <el-tree
            ref="tree_ref"
            :data="authorityList"
            show-checkbox
            :check-strictly="false"
            node-key="roleId"
            :default-checked-keys="checkedNode"
            :props="{ children: 'roleList', label: 'name' }"
        ></el-tree>
        <el-button type="primary" @click="onChangeAuth">修改权限</el-button>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getAuthorityList } from "@/api/auth";
export interface IAuthority {
    name: string; // 权限名称
    roleId: number; // 角色id
    roleList?: IAuthority[]; // 子权限, ?号表示可选的,可能没有
    viewRole?: string;
}
const route = useRoute();
let authorityList = ref<IAuthority[]>([]);
const tree_ref = ref<any>(null);

const checkedNode = ref<number[]>([]);
const expandedNode = ref<number[]>([]);

const { query } = route;
if (query.authority) {
    checkedNode.value = query.authority;
    // expandedNode.value = query.authority;
}
onMounted(() => {
    getAuthorityList().then((res) => {
        console.log(res);
        authorityList.value = res.data;
    });
});
const onChangeAuth = () => {
    console.log(tree_ref.value);
    //  const selectedTreeNode = tree_ref.value.getCheckedKeys();
    const selectedTreeNode = tree_ref.value.getCheckedNodes();
    console.log(selectedTreeNode);
};
</script>
